<template>
	<div class="edit-popup">
		<popup ref="popupRef" :title="popupTitle" :async="true" width="550px" @confirm="handleSubmit"
			@close="handleClose">
			<el-form ref="formRef" :model="formData" label-width="90px" :rules="formRules">
				<el-form-item label="第几单" prop="num">
					<el-input v-model="formData.num" clearable placeholder="请输入第几单" />
					<div class="form-tips">请从1开始排序，例如总共3单，需新增3个规则，填写数值分别为123</div>
				</el-form-item>
				<el-form-item label="金额类型" prop="money_type">
						<el-select class="w-full" v-model="formData.money_type" placeholder="请选择金额类型" clearable>
							<el-option label="固定值" :value="1" />
							<el-option label="百分比" :value="2" />
						</el-select>
					
					<div class="form-tips">固定值：订单固定金额，百分比：用户余额百分比</div>
				</el-form-item>
				<el-form-item label="订单金额" prop="money" v-if="formData.money_type ==1">
					<el-input v-model="formData.money" clearable placeholder="请输入订单金额" />
				</el-form-item>
				<el-form-item label="金额百分比" prop="money_percentage" v-if="formData.money_type ==2">
					<el-input v-model="formData.money_percentage" clearable placeholder="请输入金额百分比" />
				</el-form-item>
				<el-form-item label="佣金类型" prop="commission_type">
					<el-select class="w-full" v-model="formData.commission_type" placeholder="请选择佣金类型" clearable>
						<el-option label="固定值" :value="1" />
						<el-option label="百分比" :value="2" />
					</el-select>
					<div class="form-tips">固定值：佣金固定金额，百分比：订单金额 x 百分比</div>
				</el-form-item>
				<el-form-item label="佣金" prop="commission" v-if="formData.commission_type ==1">
					<el-input v-model="formData.commission" clearable placeholder="请输入佣金" />
				</el-form-item>
				<el-form-item label="佣金百分比" prop="commission_percentage" v-if="formData.commission_type ==2">
					<el-input v-model="formData.commission_percentage" clearable placeholder="请输入佣金百分比" />
				</el-form-item>
			</el-form>
		</popup>
	</div>
</template>

<script lang="ts" setup name="userGroupRuleEdit">
	import type { FormInstance } from 'element-plus'
	import Popup from '@/components/popup/index.vue'
	import { apiUserGroupRuleAdd, apiUserGroupRuleEdit, apiUserGroupRuleDetail } from '@/api/user_group'
	const emit = defineEmits(['success', 'close'])
	const formRef = shallowRef<FormInstance>()
	const popupRef = shallowRef<InstanceType<typeof Popup>>()
	const mode = ref('add')


	// 弹窗标题
	const popupTitle = computed(() => {
		return mode.value == 'edit' ? '编辑规则' : '新增规则'
	})

	// 表单数据
	const formData = reactive({
		id: '',
		group_id:'',
		num: '',
		money_type: 1,
		money: '',
		money_percentage: '',
		commission_type: 1,
		commission: '',
		commission_percentage: '',
	})


	// 表单验证
	const formRules = reactive<any>({
		num: [{
			required: true,
			message: '请输入第几单',
			trigger: ['blur']
		}],
		money_type: [{
			required: true,
			message: '请输入金额类型',
			trigger: ['blur']
		}],
		commission_type: [{
			required: true,
			message: '请输入佣金类型',
			trigger: ['blur']
		}]
	})


	// 获取详情
	const setFormData = async (data : Record<any, any>) => {
		console.log(data)
		for (const key in formData) {
			if (data[key] != null && data[key] != undefined) {
				//@ts-ignore
				formData[key] = data[key]
			}
		}
	}

	const getDetail = async (row : Record<string, any>) => {
		const data = await apiUserGroupRuleDetail({
			id: row.id
		})
		setFormData(data)
	}


	// 提交按钮
	const handleSubmit = async () => {
		await formRef.value?.validate()
		const data = { ...formData, }
		mode.value == 'edit'
			? await apiUserGroupRuleEdit(data)
			: await apiUserGroupRuleAdd(data)
		popupRef.value?.close()
		emit('success')
	}

	//打开弹窗
	const open = (type = 'add') => {
		mode.value = type
		popupRef.value?.open()
	}

	// 关闭回调
	const handleClose = () => {
		emit('close')
	}

	defineExpose({
		open,
		setFormData,
		getDetail
	})
</script>